<template>
	<view class="vk-mall-h5-share">
		<view v-if="showMask" class="mask" @click="close">
			<view class="content">
				<view>{{ content }}</view>
				<view class="arrow-up"></view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-mall-h5-share",
	props: {
		content: {
			Type: String,
			default: "请点击右上角三个点-转发给朋友进行分享"
		}
	},
	data() {
		return {
			showMask: false
		};
	},
	methods: {
		show() {
			this.showMask = true;
		},
		close() {
			this.showMask = false;
		}
	}
};
</script>

<style lang="scss" scoped>
.vk-mall-h5-share {
	.mask {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 999;
	}

	.content {
		background-color: white;
		padding: 20px;
		border-radius: 10px;
		text-align: center;
		position: absolute; /* 添加position属性 */
		top: 30px;
		right: 10px;
	}

	.toggle-button {
		position: fixed;
		top: 20px;
		right: 20px;
		padding: 10px 20px;
		background-color: #007bff;
		color: white;
		border: none;
		border-radius: 5px;
		cursor: pointer;
		z-index: 1000;
	}

	.arrow-up {
		position: absolute;
		top: -20px;
		right: 10px;
		width: 0;
		height: 0;
		border-left: 10px solid transparent;
		border-right: 10px solid transparent;
		border-bottom: 15px solid white;
	}
}
</style>
